import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import { Button, message } from 'antd';
import FirstStep from './components/FirstStep/FirstStep'
import CategoryTable from './components/CategoryTable/CategoryTable'
import IntegrationInfo from './components/TemplateInfo/TemplateInfo'
import IntegrationArticle from './components/IntegrationArticle/IntegrationArticle'
import IntegrationMission from '@/components/IntegrationMission/IntegrationMission'
import IntegrationOthers from '@/components/IntegrationOthers/IntegrationOthers'
import DrawerContent from './components/Drawer/Drawer'

const plainOptions = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
  { label: 'ss', value: 'ss' },
];
const articlePlainOptions = ['Read time']
const missionPlainOptions = ['Login', 'Sign In', 'Like', 'Share', 'Readreward']
const othersPlainOptions = ['Contribute', 'Payment']

@inject('rootStore') @observer
class Distribution extends Component {
  @observable currentStep = 1;
  @observable drawerVisible = true;
  @observable indeterminate = true;
  @observable checkAll = false;
  @observable articleCheckedList = [];
  @observable missionCheckedList = [];
  @observable othersCheckedList = [];

  componentDidMount() {
    const integrationStore = this.props.rootStore.integrationTemplateStore;

    if (!integrationStore.categoryFiftyLoadSuccess) {
      integrationStore.toGetNewsCategoryFifty()
    }
  }

  toNextStep = () => {
    const integrationStore = this.props.rootStore.integrationTemplateStore;
    switch (this.currentStep) {
      case 0:
        // if (integrationStore.checkStepOne()) {
        //   this.currentStep = this.currentStep + 1;
        // } else {
        //   message.error('Start Time Must Be Less Than End Time')
        // }
        this.currentStep = this.currentStep + 1;
        this.drawerVisible = true
        break;
      case 1:
        this.currentStep = this.currentStep + 1;
        break;
      default:
        this.currentStep = this.currentStep + 1;
    }
  }

  toLastStep = () => {
    this.currentStep = this.currentStep - 1;
  }

  toTemplateList = () => {

  }

  drawerOnClose = () => {
    this.drawerVisible = false
  }

  onCheckAllChange = (e) => {
    console.log(e,plainOptions);
    this.checkedList = e.target.checked ? plainOptions : [];
    this.indeterminate = false;
    this.checkAll = e.target.checked
  }

  integrationOnChange = (value, index) => {
    console.log(value, index);
  }

  articleOnChange = (checkedList) => {
    this.articleCheckedList = checkedList;
  }

  missionOnChange = (checkedList) => {
    this.missionCheckedList = checkedList;
  }

  othersOnChange = (checkedList) => {
    this.othersCheckedList = checkedList;
  }


  render() {
    const integrationStore = this.props.rootStore.integrationTemplateStore;

    return (
      <div className="page-content distribution">
        <FirstStep currentStep={this.currentStep} />
        <DrawerContent
          drawerOnClose={this.drawerOnClose}
          drawerVisible={this.drawerVisible}
          indeterminate={this.indeterminate}
          onCheckAllChange={this.onCheckAllChange}
          checkAll={this.checkAll}
          categoryOnChange={integrationStore.categoryOnChange}
          plainOptions={integrationStore.categoryListFifty}
          checkedList={integrationStore.checkedList}
          articlePlainOptions={articlePlainOptions}
          articleCheckedList={this.articleCheckedList}
          articleOnChange={this.articleOnChange}
          missionPlainOptions={missionPlainOptions}
          missionCheckedList={this.missionCheckedList}
          missionOnChange={this.missionOnChange}
          othersPlainOptions={othersPlainOptions}
          othersCheckedList={this.othersCheckedList}
          othersOnChange={this.othersOnChange} />
        {
          this.currentStep === 0 ?
          <div className="info-table">
            <IntegrationInfo />
            <div className="mt20">
              <Button
                type="primary mr20 ml140"
                onClick={this.toTemplateList}>Cancel</Button>
              <Button
                type="primary"
                onClick={this.toNextStep}>Next</Button>
            </div>
          </div>
          :
          null
        }
        {
          this.currentStep === 1 ?
          <div className="category-table">
            <Button
              type="primary"
              className="open-drawer"
              onClick={() => this.drawerVisible = true}>Open</Button>
            <div className="title-name pb16">Category:</div>
            <CategoryTable
              integrationOnChange={(value, index) => integrationStore.integrationOnChange(value, index)}
              categoryCheckedList={integrationStore.categoryCheckedList} />
            <div className="category-article">
              <div className="article-name">Articles:</div>
              <div className="article-container create-container">
                <IntegrationArticle
                  articleCheckedList={this.articleCheckedList}
                  firstArticleFrom={integrationStore.articleParam[0].minLimit}
                  firstArticleFromOnChange={integrationStore.firstArticleFromOnChange}
                  firstArticleIntegral={integrationStore.articleParam[0].awards[0].amount}
                  firstArticleIntegralOnChange={integrationStore.firstArticleIntegralOnChange}
                  secondArticleFrom={integrationStore.articleParam[1].minLimit}
                  secondArticleFromOnChange={integrationStore.secondArticleFromOnChange}
                  secondArticleTo={integrationStore.articleParam[1].maxLimit}
                  secondArticleToOnChange={integrationStore.secondArticleToOnChange}
                  secondArticleIntegral={integrationStore.articleParam[1].awards[0].amount}
                  secondArticleIntegralOnChange={integrationStore.secondArticleIntegralOnChange}
                  thirdArticleFrom={integrationStore.articleParam[2].minLimit}
                  thirdArticleFromOnChange={integrationStore.thirdArticleFromOnChange}
                  thirdArticleIntegral={integrationStore.articleParam[2].awards[0].amount}
                  thirdArticleIntegralOnChange={integrationStore.thirdArticleIntegralOnChange}
                />
                <Button
                  type="primary mr20"
                  onClick={this.toLastStep}>Back</Button>
                <Button
                  type="primary"
                  onClick={this.toNextStep}>Next</Button>
              </div>
            </div>
          </div>
          :
          null
        }
        {
          this.currentStep === 2 ?
          <div className="mission-table">
            <Button
              type="primary"
              className="open-drawer"
              onClick={() => this.drawerVisible = true}>Open</Button>
            <IntegrationMission
              loginIntegral={integrationStore.loginParam[0].awards[0].amount}
              loginIntegralOnChange={integrationStore.loginIntegralOnChange}
              signIntegral={integrationStore.signInParam[0].awards[0].amount}
              signIntegralOnChange={integrationStore.signIntegralOnChange}
              continuousSignList={integrationStore.continuousSignList}
              addSignInItem={integrationStore.addSignInItem}
              deleteSignItem={(index) => integrationStore.deleteSignItem(index)}
              signDaysOnChange={(e, index) => integrationStore.signDaysOnChange(e, index)}
              signDaysIntegralOnChange={(value, index) => integrationStore.signDaysIntegralOnChange(value, index)}
              signDaysPesoOnChange={(e, index) => integrationStore.signDaysPesoOnChange(e, index)}
              likeIntegral={integrationStore.likeShareParam[0].awards[0].amount}
              likeIntegralOnChange={integrationStore.likeIntegralOnChange}
              shareIntegral={integrationStore.likeShareParam[1].awards[0].amount}
              shareIntegralOnChange={integrationStore.shareIntegralOnChange}
              readRewardList={integrationStore.readRewardList}
              addReadRewardItem={integrationStore.addReadRewardItem}
              readArticleOnChange={(value, index) => integrationStore.readArticleOnChange(value, index)}
              readIntegralOnChange={(value, index) => integrationStore.readIntegralOnChange(value, index)}
              deleteReadItem={(index) => integrationStore.deleteReadItem(index)} />
              <div className="mt20">
                <Button
                  type="primary mr20 ml88"
                  onClick={this.toLastStep}>Back</Button>
                <Button
                  type="primary"
                  onClick={this.toNextStep}>Next</Button>
              </div>
          </div>
          :
          null
        }
        {
          this.currentStep === 3 ?
          <div className="others-table">
            <Button
              type="primary"
              className="open-drawer"
              onClick={() => this.drawerVisible = true}>Open</Button>
            <IntegrationOthers
              toLastStep={this.toLastStep}
              toConfrim={integrationStore.toConfrim}
              contributeIntegral={integrationStore.contributeParam[0].awards[0].amount}
              contributeIntegralOnChange={integrationStore.contributeIntegralOnChange}
              contributeList={integrationStore.contributeList}
              addcontributeItem={integrationStore.addcontributeItem}
              deleteContributeItem={(index) => integrationStore.deleteContributeItem(index)}
              articlesOnChange={(value, index) => integrationStore.articlesOnChange(value, index) }
              articlesIntegrationOnChange={(value, index) => integrationStore.articlesIntegrationOnChange(value, index)}
              paymentIntegral={integrationStore.paymentParam[0].awards[0].amount}
              paymentIntegralOnChange={integrationStore.paymentIntegralOnChange}
              paymentList={integrationStore.paymentList}
              addPaymentItem={integrationStore.addPaymentItem}
              deletePaymentItem={(index) => integrationStore.deletePaymentItem(index)}
              paymentOnChange={(value, index) => integrationStore.paymentOnChange(value, index)}
              paymentListIntegralOnChange={(value, index) => integrationStore.paymentListIntegralOnChange(value, index)} />
              <div className="mt20">
                <Button
                  type="primary mr20 ml80"
                  onClick={this.toLastStep}>Back</Button>
                <Button
                  type="primary"
                  onClick={integrationStore.toConfrim}>Confirm</Button>
              </div>
          </div>
          :
          null
        }
      </div>
    )
  }
}

export default Distribution;
